<template>
    <rx-dialog  @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-radio-group v-model="value">
                <div v-for="item in menus">
                    <div class="rx-board" @click="getSelect(item.id)">
                        <my-icon :type="selectId.contains(item.id)?'iconicon-test49':'iconicon-test47'"></my-icon>
                        <div class="rx-app-icon" :style="{'backgroundColor':item.backColor}">
                            <rx-use-icon v-model="item.iconPc"></rx-use-icon>
                        </div>
                        <span class="rx-board-name">{{$i18(item.name)}}</span>
                    </div>
                    <div v-if="selectId.contains(item.id)" class="rx-children" @click="getSelect(child.id)" v-for="child in item.children">
                        <div><my-icon :type="selectId.contains(child.id)?'iconicon-test49':'iconicon-test47'"></my-icon><span class="rx-board-name">{{$i18(child.name)}}</span></div>
                        <template v-if="selectId.contains(child.id)">
                            <div class="rx-params"  v-for="obj in getParams(child.params)"  @click.stop="onChange(item,child,obj)">
                                <a-radio :value="obj.alias+item.appId" style="margin-right: 10px"></a-radio><span class="rx-board-name">{{$i18(obj.name)}}</span>
                            </div>
                        </template>
                    </div>
                </div>
                </a-radio-group>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxLayout,RxDialog,Util,RxUseIcon} from "@lowcode/jpaas-common-lib";
import InsPortalDefApi from "@/api/portal/core/insPortalDef";
export default {
    name: "FormChartBoard",
    props:["layerid","lydata","destroy"],
    components: {
        RxLayout,
        RxDialog,
        RxUseIcon
    },
    data(){
        return{
          menus:[],
          checkedKeys:[],
          selectedRows: "",
          value:'',
          chartValue:{},
          showTree:false,
          selectId:[],
        }
    },
    created(){
        this.init();
    },
    methods:{
      i18n(name,text,key){
        return this.$ti18(name,text,"FormChangeLog",key);
      },
        getSelect(id){
            if(!this.selectId.contains(id)){
                this.selectId.push(id)
            }else {
                this.selectId.filter((res,index)=>{
                    if(res ==id){
                        this.selectId.splice(index,1)
                    }
                })
            }
        },
        onChange(item,child,obj){
            this.value = obj.alias+item.appId;
            /*
            appId:应用appid
            menuKey：菜单别名key
            pageAlias：页面别名
            alias：组件别名
            moduleId：组件id
             */
            this.chartValue = {
                appId: item.appId,
                menuKey: item.menuKey,
                pageAlias:child.menuKey,
                alias:obj.alias,
                moduleId:obj.id
            }
        },
        init() {
            var self = this;
            InsPortalDefApi.getCustomMenus().then(res=>{
              self.menus = Util.listToTree(res.data,"id","parentId");
            })
        },
        getParams(params){
            let list = [];
            if(!params){
                return [];
            }
            let obj =  JSON.parse(params);
            if(obj.config){
                let configList = JSON.parse(obj.config);
                if(configList.length>0){
                    configList.filter(res=>{
                        list.push({
                            alias:res.config.alias,
                            name: this.getName(res),
                            id:res.id
                        })
                    })
                }
            }
            return list
        },
        getName(res){
            let name = {
                tabContainer:this.i18n('formChartBoard.tabContainerCompo','tab容器'),
                ureport:'ureport',
                quillEditor:this.i18n('formChartBoard.richText','富文本框')
            }
            if(res.config.name){
                return res.config.name
            }
            if(name[res.defConf]){
                return  name[res.defConf]
            }
            return ''

        },
        handleSubmit(v){
          if(!this.chartValue.alias){
            this.$message.warning(this.i18n('formChartBoard.chart','请选择图表'));
            v.loading = false
            return
          }
            Util.closeWindow(this,'ok',this.chartValue);
        },
        cancel(){
            Util.closeWindow(this,'cancel');
        },
    }
}
</script>

<style scoped>
.rx-board {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    margin: 10px 0px;
}

.rx-board-name {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 0px;
    color: rgba(0, 0, 0, 0.85);
    margin-left: 9px;
    padding-right: 20px;
}
.rx-app-icon{
    width: 30px;
    height: 30px;
    font-size: 20px;
    overflow: hidden;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-left: 10px;
}
.rx-children{
    display: flex;
    justify-content: flex-start;
    cursor: pointer;
    margin: 5px 0px 5px 20px;
    flex-direction: column;
}
.rx-params{
    align-items: center;
    cursor: pointer;
    margin: 5px 0px 5px 20px;
}
</style>